<template>
  <div>
    <el-row :gutter="40">
      <el-col :span="18">
        <el-row :gutter="20">
          <el-col :span="16">
            <el-carousel style="width: 100%;height: 500px;">
                <el-carousel-item v-for="p in bannerArr" style="width: 100%;height: 500px;">
                  <img :src="p" style="width:100%;">
                </el-carousel-item>
            </el-carousel>
            <br/>
            <el-button style="width: 100px;background-color: orangered;color: white" @click="handleDialogVisible()">点击购买</el-button>
            <br/>
            <br/>
          </el-col>
          <el-col :span="8">
            <el-card style="width: 100%;height: 340px;font-size: 15px;color: darkslategrey;font-family: 'Serif Fonts';background-color: pink">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:orangered;font-weight: bold">{{travelDetailArr.attractionName}}</span>
              {{travelDetailArr.attractionIntroduction}}
            </el-card>
            <el-card style="width: 100%;text-align: center;background-color: mediumpurple">
              <span style="font-weight: bold;color: ghostwhite;font-size: 40px;font-family: 仿宋">{{ travelDetailArr.attractionAllName }}</span><br><br>
              <span style="font-weight: bold;color: yellowgreen;font-size: 25px">￥{{ travelDetailArr.price }}</span>
            </el-card>
          </el-col>
        </el-row>
        <el-row>
          <div style="width: 70%;color: white;background-color: deepskyblue;font-size: 20px;text-align: center">费用包含</div>
          <div style="width: 30%;background-color: darkgrey"></div>
        </el-row>
        <el-row>
              <el-table :data="feeArr" >
                <el-table-column label="类型" prop="type" align="center" width="200"></el-table-column>
                <el-table-column label="说明" prop="description" align="left"></el-table-column>
              </el-table>
        </el-row>
        <el-row>
          <div style="width: 70%;color: white;background-color: deepskyblue;font-size: 20px;text-align: center">儿童政策</div>
          <div style="width: 30%;background-color: darkgrey"></div>
        </el-row>
        <el-row>
          <div style="width: 100%;margin-left: 150px;color: grey">
               <div style="text-align: left">
                 <br>【儿童政策说明】
               </div>
              <div style="text-align: left">
                1、1.2米以上儿童建议预定成人订单，如有疑问下单前联系客服人员
              </div>
              <div style="text-align: left">
                 2、儿童指身高1.2米以内，含往返车费、保险及导服，不含景点门票，如超高请自行补齐门票。
               </div>
            <br>
          </div>
        </el-row>
        <el-row>
          <div style="width: 70%;color: white;background-color: deepskyblue;font-size: 20px;text-align: center">老人政策</div>
          <div style="width: 30%;background-color: darkgrey"></div>
        </el-row>
        <el-row>
          <div style="width: 100%;margin-left: 150px;color: grey">
            <div style="text-align: left">
              <br>{{travelDetailArr.orderPolicy}}
            </div>
          </div>
          <br>
        </el-row>
        <el-row>
          <div style="width: 70%;color: white;background-color: deepskyblue;font-size: 20px;text-align: center">费用不含</div>
          <div style="width: 30%;background-color: darkgrey"></div>
        </el-row>
        <el-row>
          <div style="width: 100%;margin-left: 150px;color: grey">
              <div style="text-align: left">
                 <br>【单房差】
              </div>
              <div style="text-align: left">
                1、本产品报价是按照2成人入住1间房计算的价格，如出现单男单女，尽量安排该客人与其他同性别团友拼房；
              </div>
            <div style="text-align: left">
                 2、如不愿拼房或未能拼房，请补缴单房差。
            </div>
          </div>
          <br>
        </el-row>
        <el-row>
          <div style="width: 70%;color: white;background-color: deepskyblue;font-size: 20px;text-align: center">线路特色</div>
          <div style="width: 30%;background-color: darkgrey"></div>
        </el-row>
        <el-row>
          <div style="width: 100%;margin-left: 150px;color: grey">
            <div style="text-align: left">
              <br>{{travelDetailArr.pathTrait}}
            </div>
          </div>
          <br>
        </el-row>
        <el-row>
          <el-card style="width: 100%;height: 250px;color: grey">
            <div style="font-size: 20px;color: blue">注意事项:</div>
            <ul style="color:hotpink  ;">
            <li>为了您人身、财产的安全，请您避免在公开场合暴露贵重物品及大量现金。 上街时需时刻看管好首饰、相机等随身物品</li>
              <li>游泳、漂流、潜水、滑雪、溜冰、戏雪、冲浪、探险、热气球、高山索道等活动项目，均存在危险。参与前请根据自身条件，并充分参考当地相关部门及其它专业机构的相关公告和建议后量力而行</li>
                <li>智游天下从出行常识、旅游活动（风险性项目）和特殊人群三方面为您提供旅游安全指南，请您仔细阅读 安全指南及警示</li>
                  <li>为普及旅游安全知识及旅游文明公约，使您的旅程安全顺利圆满完成，特制定《智游天下旅游告游客注意事项》请您认真阅读并切实遵守，同时上海文化和旅游局推荐您阅读《文明旅游注意事项》，让我们一起用文明的方式，探索世界的美好</li>
                    <li>为确保锂电池的安全运输，避免发生不安全事件，我们友情提醒您，民航局将对旅客携带锂电池乘机进行严格检查。详情请参考 民航局关于旅客行李中携带“锂电池、充电宝”乘机规定的公告</li>
            </ul>
          </el-card>
        </el-row>
        <el-row>
          <el-card style="width: 100%;height: 300px">
            <el-form>
                   <el-form-item>
                     <span>评论:</span>
                     <el-input type="textarea" resize="none" :rows="3" placeholder="请输入内容"></el-input>
                   </el-form-item>
            </el-form>
          </el-card>
        </el-row>
      </el-col>
      <el-col :span="6">
        <el-card style="height: 100%">
          <h1>旅游攻略</h1>
          <a href="/travelguide" >【环洲苏州河】除了《八佰》和四行仓库，还有很多值得打卡的地儿</a><br><br>
          <a href="/travelguide" >【魔都暴走记】你是我脑海中鲜明的记忆,做一场与上海有关的白日梦</a><br><br>
          <a href="/travelguide" >重庆在逃公主在上海迪士尼度假区3日深度游 附上海吃住行购集合</a><br><br>
          <a href="/travelguide" >放肆嗨玩,上海欢乐谷,玛雅公园全体验,Happy一夏天| 上海</a><br><br>
          <a href="/travelguide" >繁华深处有自在！四条“小众”线路探寻魔都上海之“魔”</a><br><br>
          <a href="/travelguide" >【老挝泰国旅行】2020新年第一场旅行：老挝泰美奇境之旅</a><br><br>
          <a href="/travelguide" >走入松江，不一样的上海郊野风情（2日游完全攻略）</a><br><br>
          <a href="/travelguide" >漫步杨浦滨江带，感受百年工业沧桑</a>
        </el-card>
      </el-col>
    </el-row>
  </div>

  <!-- 点击购买弹窗 -->
  <el-dialog title="旅行团下单" v-model="dialogVisible"
             style="width:1000px;padding:40px;" :before-close="handleClosePurchase">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="旅行社名称">
            <el-input readonly :value="travelDetailArr.travelAgentName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="6">
          <el-form-item label="旅行团名称">
            <el-input readonly :value="travelAgent.packageName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="景点名称">
            <el-input readonly :value="travelDetailArr.attractionName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="用户名称">
            <el-input readonly :value="user.username"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="8">
          <el-form-item label="出行时间">
            <el-date-picker
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="YYYY-MM-DD HH:mm:ss"
                format="YYYY-MM-DD HH:mm:ss"
                v-model="times"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-table :data="passengerInfo">
          <el-table-column type="index" label="编号" width="80" align="center"/>
          <el-table-column prop="name" label="旅客姓名" align="center"/>
          <el-table-column prop="cardNum" label="旅客身份证号" align="center"/>
          <el-table-column>
            <template #default="scope">
              <el-button link type="primary" size="small" @click="editPassenger(scope.row.id)">编辑</el-button>
              <el-button link type="primary" size="small" @click="deletePassenger(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row :gutter="30">
        <br/>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          旅行团费用:<span style="color:red;font-size: 18px">￥{{travelDetailArr.price}}</span>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="cancel()">取消</el-button>
      <el-button type="primary" @click="purchase()">报名</el-button>
    </template>
  </el-dialog>
</template>
<script setup>

import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";
const dialogVisible=ref(false);
const handleDialogVisible = () => {
  dialogVisible.value=true;
}
const handleClosePurchase = () => {
  if(confirm('是否关闭本弹窗？')){
    dialogVisible.value=false;
  }
}

const user = ref(getUser());

const travelDetailId = new URLSearchParams(window.location.search).get('id');

//保存旅行社信息
const travelDetailArr = ref({})
//查找旅行社信息
const searchTravelDetail = () => {
  console.log(travelDetailId)
  let data = qs.stringify({travelDetailId:travelDetailId});
  console.log(data);
  axios.get(BASE_URL+'/travelagent/searchTravelDetail?'+data)
      .then((response)=>{
        if(response.data.code===2000){
          travelDetailArr.value = response.data.data[0];
          console.log(travelDetailArr.value);
        }
      })
}

//保存旅行团套餐信息
const travelAgent = ref([])
//查找旅行团套餐信息
const selectTravel = () => {

  axios.get(BASE_URL+'/travelagent/select')
      .then((response)=>{
        if(response.data.code===2000) {
          travelAgent.value = response.data.data
        }
      })
}

const passengerInfo = ref([])
const selectPassenger = () => {
  //查询当前用户绑定的旅客信息
  axios.get(BASE_URL+'/v1/passenger/select/'+getUser().id)
      .then((response)=>{
        if (response.data.code === 2000){
          passengerInfo.value = response.data.data;
          for (let i = 0; i < passengerInfo.value.length; i++) {
            let phone = passengerInfo.value[i].phone;
            let cardNum = passengerInfo.value[i].cardNum;
            // 隐藏手机号中间部分
            const maskPhone = (phone) => {
              if (phone.length !== 11) {
                return phone; // 如果不是11位手机号，直接返回
              }
              return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
            };
            // 隐藏身份证号码中间部分
            const maskCardNum = (cardNum) => {
              if (cardNum.length !== 18) {
                return cardNum; // 如果不是18位身份证号码，直接返回
              }
              return cardNum.replace(/(\d{4})\d{10}(\d{4})/, '$1**********$2');
            };
            passengerInfo.value[i].phone = maskPhone(phone);
            passengerInfo.value[i].cardNum = maskCardNum(cardNum);
          }
        }else {
          ElMessage.error(response.data.msg);
        }
      })
}

const times = ref([])
const travelOrders = ref({})

const purchase = () => {
  travelOrders.value.departureDate = times.value[0];
  travelOrders.value.returnDate = times.value[1];
  travelOrders.value.customerId = user.id;
  travelOrders.value.packageId = travelAgent.id;
  travelOrders.value.numberOfPeople = passengerInfo.value.length;
  travelOrders.value.paymentStatus = 1;
  axios.post(BASE_URL+'/travelOrder/save'+travelOrders)
      .then((response)=>{
        if(response.data.code===2000){
          ElMessage.success('下单成功！');
        }else{
          ElMessage.error('下单失败！');
        }
      })
}


onMounted(()=>{
  searchTravelDetail();
  selectTravel();
  selectPassenger();
})

const bannerArr = ref([
  "/travelAgent/travel/五台山1.jpg",
  "/travelAgent/travel/五台山2.jpg",
  "/travelAgent/travel/五台山3.jpg"
]);

const feeArr = ref([
    {
        type:'交通',
        description:'1、全程空调旅游大巴，往返高速不换车，保证一人一座，一车一导'
    },
  {
    type:'住宿',
    description:'1、行程所列酒店住宿费用'
  },
  {
    type:'门票',
    description:'1、五台山门票'
  },
  {
    type:'保险',
    description:'1、含旅行社责任保险'
  },{
    type:'导游服务',
    description:'1、当地中文导游服务，自由活动期间除外'
  },

]);

</script>



<style scoped>
/* 未被访问的链接 */
a:link {
  color: black;
}

/* 已被访问的链接 */
a:visited {
  color: purple;
}

/* 鼠标悬停在链接上的状态 */
a:hover {
  color: red;
}

/* 链接被激活（点击时）的状态 */
a:active {
  color: orange;
}
</style>